<template>
    <div id="userPage">
      <div class="headpic flex flex-middle">
        <router-link to="/user" style="display: block;" class="flex-auto text-center">
          <div class="head"><img :src="$store.state.userInfo.face" /></div>
          <p>{{$store.state.userInfo.nick_name || '未设置昵称'}}</p>
          <p>{{$store.state.userInfo.phone}}</p>
        </router-link>
      </div>

      <div style="margin-top: 0.25rem;">
        <group>
          <cell title="我的账户" is-link link="account"></cell>
          <cell title="帮助中心" is-link link="help"></cell>
          <cell title="分享有礼" is-link link="shareTn"></cell>
          <cell title="系统设置" is-link link="setting"></cell>
        </group>
      </div>
    </div>
</template>
<script>
  import { Cell } from 'vux'
  export default{
    components: {
      Cell
    }
  }
</script>
<style scoped>
  .headpic{
    height: 4.35rem;
    background: #fff url("../../static/img/zhbg.png") bottom left no-repeat;
  }
  .headpic p{
    line-height: 0.4rem;
    margin-top: 0.15rem;
    font-size: 0.32rem;
  }
  .head img{
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    margin: 0px auto;
  }
</style>
